import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Button, Checkbox, LoadingMask} from "../../../../packages";
import {getComponentCls} from "../../../../packages/utils/getComponentCls";

export const demo6 = designPage(() => {

  const state = reactive({
    flag1: {
      loading: true,
      init: true,
    },
  });

  return () => (
    <DemoRow title={"组件调用loading-mask"}>
      <Checkbox label="init content" v-model={state.flag1.init}/>
      <Checkbox label="open mask" v-model={state.flag1.loading}/>
      <p>如果父节点的position不为fixed、relative、absolute，loading-mask会自动将父节点的样式设置为 relative</p>
      {!!state.flag1.init && (
        <div style={{ height: '300px', width: '300px', backgroundColor: `var(--${getComponentCls('secondary-1')})` }}>
          <Button label={'this is button'}/>
          <LoadingMask v-model={state.flag1.loading} message={'loading...'}/>
        </div>
      )}
    </DemoRow>
  );
});
